<template>
  <div class="page">
    <navigation>{{ $t('设置') }}</navigation>
    <div class="list">
      <nuxt-link to="setting/language" class="item"><span>{{ $t('多语言') }}</span><i class="iconfont icon-jiantouarrow487"></i></nuxt-link>
      <nuxt-link to="setting/currency" class="item"><span>{{ $t('默认货币') }}</span><i class="iconfont icon-jiantouarrow487"></i></nuxt-link>
      <!-- <div class="item"><span>清理缓存</span><span class="cache">332.93k</span></div> -->
      <div class="item" @click="handleLogout"><span>{{ $t('退出登录') }}</span></div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
import navigation from '@/components/Navigation'
export default {
  components: { navigation },
  methods: {
    ...mapActions({
      logout: 'auth/logout'
    }),
    handleLogout () {
      this.logout()
        .then(() => {
          this.$router.push({
            path: '/'
          })
        })
    }
  }
}
</script>
<style scoped>
.list {
  background-color: #f0f3f8;
  overflow: hidden;
}
.item {
  margin: 8px 0;
  background: #fff;
  padding: 0 15px;
  height: 50px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item span {
  font-size: 14px;
}
.cache {font-size: 12px;color: #888888;}
</style>
